import {
    memo,
    useMemo,
} from 'react'
import type { Node } from '../types'
import { CUSTOM_NODE } from '../constants'
import {
    NodeComponentMap,
    PanelComponentMap,
} from './constants'
import BasePanel from './_base/base-panel'

export const WorkflowPanel = memo((props: Node) => {
    const nodeClass = props.type
    const nodeData = props.data
    const PanelComponent = useMemo(() => {
        if (nodeClass === CUSTOM_NODE)
            return PanelComponentMap[nodeData.type]

        return () => null
    }, [nodeClass, nodeData.type])

    if (nodeClass === CUSTOM_NODE) {
        return (
            <BasePanel key={props.id} {...props}>
                <PanelComponent />
            </BasePanel>
        )
    }

    return null
})

WorkflowPanel.displayName = 'WorkflowPanel'

export default memo(WorkflowPanel)
